{%- assign number_blocks = section.blocks | where: 'type', 'number-items' -%}
<div
  class="station-number-items-wrapper as-station-number-items-wrapper container-topic px-0 overflow-hidden"
  data-block-size="{{ number_blocks.size }}"
>
  <div class="container">
    <div class="row">
      <div class="col-lg-7 col-12 flex-center py-7 pb-lg-7 pb-0">
        <div class="row">
          <div class="">
            {%- if section.settings.heading != empty -%}
              <h2 class="display-3 fw-bold mb-0 section-heading">{{ section.settings.heading }}</h2>
            {%- endif -%}
            {%- if section.settings.text != empty -%}
              <div class="h4 gray-700 section-des mt-lg-4 mt-3 mb-0 fw-normal no-last-margin richtext-with-link richtext-link-default">
                {{ section.settings.text }}
              </div>
            {%- endif -%}
          </div>
          {%- assign number_blocks = section.blocks | where: 'type', 'number-items' -%}
          {%- if number_blocks.size > 0 -%}
            <div class=" mt-lg-6 mt-4 col-lg-10 col-6">
              <div class="">
                {%- for block in number_blocks -%}
                  <div class="as-trigger-{{ forloop.index }}"></div>
                  <div class="d-flex align-items-baseline py-2 border-bottom {% if forloop.first == true %} pt-0 pb-2 {% endif %} {% if forloop.last == true %} pb-0 pt-2 border-bottom-0 {% endif %}">
                    {%- if block.settings.title != empty -%}
                      {% assign myString = block.settings.title %}
                      {% assign firstCharacter = myString | slice: 0, 1 %}
                      {% assign otherCharacters = myString | slice: 1, myString.size %}
                      <p
                        class="mb-0 display-1 section-heading count-number fw-bold number-title"
                      >
                        <span
                          id="count-number-{{ forloop.index }}"
                          data-number="{{ firstCharacter }}"
                          class=""
                        >
                          {{- firstCharacter -}}
                        </span>
                        {{- otherCharacters }}
                      </p>
                    {%- endif -%}
                    {%- if block.settings.text != empty -%}
                      <p class="h1 mb-0 number-text">{{ block.settings.text }}</p>
                    {%- endif -%}
                  </div>
                {%- endfor -%}
              </div>
            </div>
          {%- endif -%}
        </div>
      </div>
      <div class="col-lg-5 col-12">
        <div class="pic-content w-100">
          <picture class="d-md-block d-none">
            <img
              class="object-fit-cover"
              src="{{ section.settings.image_desktop | img_url: 'master' }}"
              alt="{{ section.settings.image_desktop.alt | escape }}"
              width="{{ section.settings.image_desktop.width | divided_by: 2 }}"
              height="{{ section.settings.image_desktop.height | divided_by: 2 }}"
            >
          </picture>
          {% comment %}
            <picture class="d-md-none d-block w-100">
              <img
                class="object-fit-cover"
                src="{{ section.settings.image_mobile | img_url: 'master' }}"
                alt="{{ section.settings.image_mobile.alt | escape }}"
                width="{{ section.settings.image_mobile.width | divided_by: 2 }}"
                height="{{ section.settings.image_mobile.height | divided_by: 2 }}"
                loading="lazy"
              >
            </picture>
          {% endcomment %}
        </div>
      </div>
    </div>
  </div>
  <div class="d-md-none d-block pic-content">
    <picture class="w-100">
      <img
        class="object-fit-cover w-100"
        src="{{ section.settings.image_mobile | img_url: 'master' }}"
        alt="{{ section.settings.image_mobile.alt | escape }}"
      >
    </picture>
  </div>
</div>

{% schema %}
{
  "name": "station number items",
  "class": "station-number-items-wrapper",
  "tag": "section",
  "settings": [
    {
      "label": "Image desktop",
      "type": "image_picker",
      "id": "image_desktop"
    },
    {
      "label": "Image mobile",
      "type": "image_picker",
      "id": "image_mobile"
    },
    {
      "type": "header",
      "content": "Text"
    },
    {
      "type": "text",
      "id": "heading",
      "default": "5 Hours of Battery Life",
      "label": "Heading"
    },
    {
      "type": "richtext",
      "id": "text",
      "default": "<p>Support charging and use at the same time；5000 mAh；5 hours of battery life；ultra-long standby time of more than 7 days；Portable Chargers</p>",
      "label": "Text"
    }
  ],
  "blocks": [
    {
      "type": "number-items",
      "name": "Number items",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Numbers"
        },
        {
          "type": "text",
          "id": "text",
          "default": "Text",
          "label": "Text"
        }
      ]
    }
  ]
}
{% endschema %}
